<template>
	<view>
		<!-- 轮播图区域 -->
		<view class="swiper-con">
			<!-- <view class="swiper-bg"></view> -->
			<!-- 轮播图主要内容 -->
			<swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true" @change="swiperChange">
				<swiper-item v-for="(item,i) in swiperList" :key="i">
					<image class="swiper-item-img" :src="item.fileUrl" @click="gotoDetail(item)"></image>
				</swiper-item>
			</swiper>
			<!-- 背景颜色站位 -->
			<!-- <view class="swiper-bg-fff"></view> -->
			<!-- 自定义swiper指示器 -->
			<view class="swiper-dots">
				<text class="num">{{swiperCurrent+1}}</text>
				<text class="sign">/</text>
				<text class="num">{{swiperLength}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['swiperList'],
		data() {
			return {
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: this.swiperList.length,
			}
		},
		methods: {
			gotoDetail(item) {
				this.$emit("gotoDetail", item)
			},
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
			}
		},
		onLoad() {

		}
	}
</script>

<style lang="scss" scoped>
	.swiper-con {
		width: 100%;
		position: relative;
		// margin-bottom: 30rpx;
		background-color: #23D754;
		padding-top: 30rpx;

		.swiper-item-img {
			margin-left: 7%;
			// margin-top: 20rpx;
			width: 86%;
			height: 100%;
			z-index: 9;
		}

		// .swiper-bg{
		// 	height: 30rpx;
		// }

		// .swiper-bg-fff {
		// 	position: absolute;
		// 	height: 240rpx;
		// 	width: 100%;
		// 	top: 0rpx;
		// 	background-color: #F62C2C;
		// 	z-index: -999 ;
		// }

	}

	.swiper-dots {
		display: flex;
		position: absolute;
		left: 60upx;
		bottom: 15upx;
		width: 72upx;
		height: 36upx;
		background-image: url();
		background-size: 100% 100%;

		.num {
			width: 36upx;
			height: 36upx;
			border-radius: 50px;
			font-size: 24upx;
			color: #fff;
			text-align: center;
			line-height: 36upx;
		}

		.sign {
			position: absolute;
			top: 0;
			left: 50%;
			line-height: 36upx;
			font-size: 12upx;
			color: #fff;
			transform: translateX(-50%);
		}
	}
</style>